<template>
	<view class="page">
		<view class="content-box">
			<scroll-view scroll-y="true" :style="customStyle" class="scroll-view-1" :scroll-into-view="scrollView" :class="{'scroll-view-b': multiple == 2}">
				<view v-for="(item, index) in list" :key="index" class="item-box" @click="provinceClick(item, index)" :id="'city'+ index">
					<text class="onelist-hidden" :class="selectProvinceIndex === index ? 'selected-index' : ''">{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-view-2" v-if="list[selectProvinceIndex] && list[selectProvinceIndex].childList" :style="customStyle"
				:class="{'scroll-view-b': multiple == 2}">
				<view v-for="(item, index) in list[selectProvinceIndex].childList" :key="index" class="item-box" @click="cityClick(item, index)">
					<text class="onelist-hidden" :class="selectCityIndex === index ? 'selected-index' : ''">{{ item.name }}</text>
					<text class="num" v-if="item.num && item.num > 0">{{item.num}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-view-3"
				v-if="list[selectProvinceIndex] && list[selectProvinceIndex].childList && list[selectProvinceIndex].childList[selectCityIndex] && multiple != 2"
				:style="customStyle">
				<view v-for="(item, index) in list[selectProvinceIndex].childList[selectCityIndex].childList" :key="index" class="item-box"
					@click="regionIconClick(item, index)">
					<view class="check-box" :class="getCheck(item, index) == 2 ? 'selected-index' : ''">
						<mycheckbox v-if="multiple == 1" :check="getCheck(item, index)" size="30rpx"></mycheckbox>
						<text class="onelist-hidden" style="margin-left: 8rpx;">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="affirm">
			<button class="btn-primary btn-affirm" @tap.stop.prevent="affirmCity(0)">确认</button>
		</view>
	</view>
</template>

<script>
	import address from './address.js';
	export default {
		data() {
			return {
				list: [],
				selectProvinceIndex: null,
				selectCityIndex: null,
				eventName: 'selectAddressEvent',
				allRegionCodes: []
			};
		},
		props: {
			customStyle: {
				type: String,
				default: ''
			},
			// 多选 1 市单选 2 区单选 3
			multiple: {
				type: [String, Number],
				default: 1
			},
			cityList: {
				type: Array,
				default () {
					return [];
				}
			},
			provinceIndex: {
				type: [String, Number],
				default: 0
			},
			cityIndex: {
				type: [String, Number],
				default: 0
			},
			scrollView: {
				type: [String, Number],
				default: 'city0'
			},
		},
		watch: {
			provinceIndex: {
				handler: function(value) {
					this.selectProvinceIndex = value
				},
				immediate: true,
				deep: true,
			},
			cityIndex: {
				handler: function(value) {
					this.selectCityIndex = value
				},
				immediate: true,
				deep: true,
			}
		},
		computed: {
			cityNum() {
				let { regionNameArr } = this.getProcinceCityRegionCodes();
				return regionNameArr.length;
			}
		},
		mounted() {
			console.log(this.list);
		},
		methods: {
			// 查询地区数据
			getListGroup() {
				this.list = this.cityList;
			},

			getIcon(item) {
				let map = {
					0: 'none-selected', // 全部未选
					1: 'half-selected', // 部分选
					2: 'all-selected' // 全选
				};
				let checkStatus = item.checkStatus ?? 0;
				return `/static/address/${map[checkStatus]}.png`;
			},
			getCheck(item) {
				let checkStatus = item.checkStatus ?? 0;
				return checkStatus;
			},

			// 省icon点击 省市区点击事件全部关联到区的选中取消事件 省市的选中状态根据区的选中状态处理
			provinceIconClick(item, index) {
				// 全选 点击设置成非全选 相反设置成空
				let bol = item.checkStatus === 2 ? 0 : 2;
				item.checkStatus = bol;
				item?.childList?.forEach((m) => {
					m.checkStatus = bol;
					m?.childList?.forEach((n) => {
						n.checkStatus = bol;
					});
				});
				this.$set(this.list, index, item);
			},

			// 市icon点击
			cityIconClick(item, index) {
				// 全选 点击设置成非全选 相反设置成空
				let bol = item.checkStatus != 2 ? 2 : 0;
				item.checkStatus = bol;
				item?.childList?.forEach((m) => {
					m.checkStatus = bol;
				});
				this.$set(this.list[this.selectProvinceIndex].childList, index, item);
				// 向上触发联动
				this.cityLinkEvent();
			},



			// 区icon点击
			regionIconClick(item, index) {
				// let selectProvinceIndex = this.selectProvinceIndex
				if (this.multiple == 1) {
					let bol = item.checkStatus != 2 ? 2 : 0;
					item.checkStatus = bol;
					this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex].childList, index, item);
					// 向上触发联动
					this.regionLinkEvent();
				} else {
					this.$emit("saveArea", {
						city: this.list[this.selectProvinceIndex].childList[this.selectCityIndex].name,
						area: item.name
					});
				}
				let { regionNameArr } = this.getProcinceCityRegionCodes();

				if (regionNameArr.length > 1 && regionNameArr[regionNameArr.length - 2].parentCode != item.parentCode) {
					this.list.forEach(ite => {
						ite.childList.forEach(it => {
							if (it.code != item.parentCode) {
								it.num = 0
							}
							it.childList.forEach(i => {
								if (i.parentCode != item.parentCode) {
									i.checkStatus = 0
								}
							});
						});
					});
				}
			},
			treeIterator(tree, func) {
				tree.forEach((node) => {
					func(node)
					node.childList && this.treeIterator(node.childList, func)
				})
			},

			// 区勾选触发的向上联动
			regionLinkEvent() {
				// 当前市下面所有区
				let tempList = this.list[this.selectProvinceIndex].childList[this.selectCityIndex].childList || [];

				// 所有区为选中，则当前市为全选
				let bol = tempList.every((o) => {
					return o.checkStatus === 2;
				});
				let num = tempList.filter((o) => {
					return o.checkStatus === 2;
				});
				if (num.length > 0) {
					this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex], 'num', num.length);
				} else {
					this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex], 'num', 0);
				}
				if (bol) {
					this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex], 'checkStatus', 2);
					this.cityLinkEvent();
					return;
				}
				// 所有的都为未选 则当前市未选
				let bol1 = tempList.every((o) => {
					return o.checkStatus === 0;
				});
				if (bol1) {
					this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex], 'checkStatus', 0);
					this.cityLinkEvent();
					return;
				}
				// 区半选 则市半选 省半选
				this.$set(this.list[this.selectProvinceIndex].childList[this.selectCityIndex], 'checkStatus', 1);
				this.$set(this.list[this.selectProvinceIndex], 'checkStatus', 1);
			},

			// 市勾选状态改变触发的向上联动事件
			cityLinkEvent() {
				// 当前省下面所有市
				let tempList = this.list[this.selectProvinceIndex].childList || [];
				// 所有市为选中，则当前省为全选
				let bol = tempList.every((o) => {
					return o.checkStatus === 2;
				});
				if (bol) {
					this.$set(this.list[this.selectProvinceIndex], 'checkStatus', 2);
					return;
				}
				// 所有的都为未选 则当前市未选
				let bol1 = tempList.every((o) => {
					return o.checkStatus === 0;
				});
				if (bol1) {
					this.$set(this.list[this.selectProvinceIndex], 'checkStatus', 0);
					return;
				}
				this.$set(this.list[this.selectProvinceIndex], 'checkStatus', 1);
			},

			// 省文字点击
			provinceClick(item, index) {
				this.selectProvinceIndex = index;
				if (this.multiple == 1) {
					this.selectCityIndex = 0;
				}
			},

			// 城市文字点击
			cityClick(item, index) {
				if (this.multiple == 2) {
					this.$emit("save", item);
				}
				this.selectCityIndex = index;
			},

			/**
			 * 获取全选的省市区code
			 * 省全选 则下面的市区code不加入市区code数组
			 * 市全选 则下面的区code不全选
			 */
			getProcinceCityRegionCodes() {
				let provinceArr = [];
				let cityArr = [];
				let regionArr = [];
				let provinceNameArr = [];
				let cityNameArr = [];
				let regionNameArr = [];
				let regionIdArr = [];
				for (let i = 0; i < this.list.length; i++) {
					let tempObj = this.list[i];

					for (let j = 0; j < tempObj?.childList.length; j++) {
						let tempObj1 = tempObj.childList[j];
						for (let k = 0; k < tempObj1.childList.length; k++) {
							let tempObj2 = tempObj1.childList[k];
							// 区选中
							if (tempObj2?.checkStatus === 2) {
								regionArr.push(tempObj2.addressId);
								// regionNameArr.push(tempObj2.name);
								regionNameArr.push(tempObj2);
							}
						}
					}



					// 全选
					// if (tempObj?.checkStatus === 2) {
					// 	provinceArr.push(tempObj.addressId);
					// 	provinceNameArr.push(tempObj.name);
					// 	continue;
					// 	// 省份半选
					// } else if (tempObj.checkStatus === 1) {
					// 	for (let j = 0; j < tempObj?.childList.length; j++) {
					// 		let tempObj1 = tempObj.childList[j];
					// 		// 市全选
					// 		if (tempObj1?.checkStatus === 2) {
					// 			cityArr.push(tempObj1.addressId);
					// 			cityNameArr.push(tempObj1.name);
					// 			continue;
					// 			// 市半选
					// 		} else if (tempObj1?.checkStatus === 1) {
					// 			for (let k = 0; k < tempObj1.childList.length; k++) {
					// 				let tempObj2 = tempObj1.childList[k];
					// 				// 区选中
					// 				if (tempObj2?.checkStatus === 2) {
					// 					regionArr.push(tempObj2.addressId);
					// 					// regionNameArr.push(tempObj2.name);
					// 					regionNameArr.push(tempObj2);
					// 				}
					// 			}
					// 		}
					// 	}
					// }
				}
				console.log({
					provinceArr,
					cityArr,
					regionArr,
					provinceNameArr,
					cityNameArr,
					regionNameArr
				});
				return {
					provinceArr,
					cityArr,
					regionArr,
					provinceNameArr,
					cityNameArr,
					regionNameArr
				};
			},

			/**
			 * 获取所有选中区的code
			 * 省市选中则下面的区也为选中
			 * 当省为选中状态,省下面没有市区时候也加入code
			 * 当市为选中状态, 市下面没有区时候也加入code
			 */
			getAllRegionCode() {
				let code = [];
				for (let i = 0; i < this.list.length; i++) {
					let tempObj = this.list[i];
					// 为0或者空未选中状态跳过 空选状态
					if (!tempObj.checkStatus) {
						continue;
					}
					// 全选状态
					// 状态为2 并且没有子节点则直接加入code并跳过直接进入下一个循环
					if (tempObj.checkStatus === 2 && !tempObj?.childList) {
						code.push(tempObj.addressId);
						continue;
					}
					// 半选状态 不可能存在没有子节点
					for (let j = 0; j < tempObj.childList.length; j++) {
						let tempObj1 = tempObj.childList[j];
						if (!tempObj1.checkStatus) {
							continue;
						}
						if (tempObj1.checkStatus === 2 && !tempObj1?.childList) {
							code.push(tempObj1.addressId);
							continue;
						}
						for (let k = 0; k < tempObj1.childList.length; k++) {
							let tempObj2 = tempObj1.childList[j];
							if (tempObj2?.checkStatus === 2) {
								code.push(tempObj1.addressId);
							}
						}
					}
				}
				return code;
			},

			// 保存
			save() {
				let { provinceNameArr, cityNameArr, regionNameArr, provinceArr, cityArr, regionArr } = this.getProcinceCityRegionCodes();
				let codes = this.getAllRegionCode();
			},
			affirmCity(value) {
				let { regionNameArr, regionArr } = this.getProcinceCityRegionCodes();
				let selectProvinceIndex = this.selectProvinceIndex
				let selectCityIndex = this.selectCityIndex
				console.log({ regionNameArr, regionArr, selectProvinceIndex, selectCityIndex, value });
				this.$emit("onAffirmCity", { regionNameArr, regionArr, selectProvinceIndex, selectCityIndex, value });
				// let cityCode = regionNameArr[regionNameArr.length - 1].parentCode
				// let lastRegionArr = []
				// regionNameArr.forEach(ss => {
				// 	if(ss.parentCode == cityCode){
				// 		lastRegionArr.push(ss)
				// 	}
				// });
			}
		},
		created() {
			this.getListGroup();
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(144rpx + env(safe-area-inset-bottom));

		.content-box {
			display: flex;
			font-weight: 400;
			font-size: 26rpx;
			color: #282D2D;
			line-height: 38rpx;

			.scroll-view-1 {
				width: 194rpx;
				background: #F1F4F2;
			}

			.scroll-view-2 {
				width: 278rpx;
				background: #F6F8F7;
			}

			.scroll-view-b {
				width: 50%;
			}

			.scroll-view-3 {
				width: calc(100vw - 278rpx - 194rpx);
				background: #FFFFFF;

				.check-box {
					display: flex;
					align-items: center;
				}
			}

			.item-box {
				padding: 26rpx 20rpx;
				flex: 1;
				display: flex;
				align-items: center;

				.num {
					width: 32rpx;
					height: 32rpx;
					background: #0E0E0D;
					border-radius: 50%;
					margin-left: 12rpx;
					font-weight: 600;
					font-size: 24rpx;
					color: #A7F517;
					line-height: 32rpx;
					text-align: center;
					flex-shrink: 0;
				}
			}
		}

		.affirm {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 144rpx;
			background: #FFFFFF;
			box-shadow: 0px 0 19rpx 0px rgba(198, 204, 202, 0.56);
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.btn-affirm {
				position: absolute;
				width: calc(100% - 36rpx * 2);
				top: 12rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #0E0E0D;
			}
		}
	}

	.selected-index {
		font-weight: 900;
		font-size: 26rpx;
		color: #6D9E15;
		line-height: 38rpx;
	}

	// ::v-deep ::-webkit-scrollbar {
	// 	// 滚动条整体样式
	// 	display: block;
	// 	width: 4rpx !important;
	// 	height: 4rpx !important;
	// 	overflow: auto !important;
	// }

	// ::v-deep ::-webkit-scrollbar-thumb {
	// 	// 滚动条里面小方块
	// 	background-color: #90909070 !important;
	// }

	// ::v-deep ::-webkit-scrollbar-track {
	// 	// 滚动条
	// 	background-color: #f0f0f0 !important;
	// }
</style>